import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //自定义类型   按钮
    Column buildColumn(IconData icon, String label) {
      return Column(
        //wrap_content
        mainAxisSize: MainAxisSize.min,
        //水平居中
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Icon(
            icon,
            color: Colors.black,
          ),
          Container(
            margin: EdgeInsets.only(top: 8.0),
            child: Text(
              label,
              style: TextStyle(
                  fontSize: 12,
                  //字体粗细
                  fontWeight: FontWeight.w400,
                  color: Colors.black),
            ),
          ),
        ],
      );
    }

    //底部文字
    Widget textSelection =Container(
      padding: EdgeInsets.all(10),
      child: Text('Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese Alps. Situated 1,578 meters above sea level, it is one of the larger Alpine Lakes. A gondola ride from Kandersteg, followed by a half-hour walk through pastures and pine forest, leads you to the lake, which warms to 20 degrees Celsius in the summer. Activities enjoyed here include rowing, and riding the summer toboggan run.'),

    );
    return Scaffold(
      appBar: AppBar(
        title: Text('构建布局'),
        centerTitle: true,
      ),
      body: ListView(
        children: <Widget>[
          Image.network(
            'http://e.hiphotos.baidu.com/image/h%3D300/sign=a9e671b9a551f3dedcb2bf64a4eff0ec/4610b912c8fcc3cef70d70409845d688d53f20f7.jpg',
            height: 240,
            fit: BoxFit.cover,
          ),
          _TitleSection(),
          Row(
            //平均分配水平空间
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              buildColumn(Icons.call, 'CALL'),
              buildColumn(Icons.near_me, 'ROUTE'),
              buildColumn(Icons.share, 'SHARE'),
            ],
          ),
          textSelection
        ],
      ),
    );


  }
}

//中间标题内容+关注量
class _TitleSection extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 15),
      //Row可设置水平对齐和垂直对齐
      child: Row(
        //水平居中对齐
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Container(
                  padding: EdgeInsets.only(bottom: 10),
                  child: Text(
                    '这是一个标题',
                    style: TextStyle(color: Colors.grey[800], fontSize: 16),
                  ),
                ),
                Text(
                  '这是对应的内容',
                  style: TextStyle(color: Colors.grey[500], fontSize: 14),
                ),
              ],
            ),
          ),
          Icon(
            Icons.star,
            color: Colors.red,
          ),
          Text('55', style: TextStyle(color: Colors.grey[800], fontSize: 15)),
        ],
      ),
    );
  }
}
